<template>
  <!-- 催收执行页-案件信息模块-产品信息 -->
  <section class="component product-info">
    <!-- 贷款商品类型 -->
    <el-row>
      <div class="circle"></div>
      <span class="circle-title">贷款商品类型</span>
    </el-row>
    <data-grid :labelWidth="125" :totalSpan="12" contentAlign="left" labelAlign="center" style="margin:10px;">
      <data-grid-item :span="3" label="产品名称">{{productInfo.productName}}</data-grid-item>
      <data-grid-item :span="3" label="产品品牌">{{productInfo.productBrand}}</data-grid-item>
      <data-grid-item :span="3" label="产品类型">{{productInfo.productCategory}}</data-grid-item>
      <data-grid-item :span="3" label="产品型号">{{productInfo.productModel}}</data-grid-item>
      <data-grid-item :span="3" label="产品价格">{{productInfo.productPrice}}</data-grid-item>
      <data-grid-item :span="3" label="活动项目编号">{{productInfo.productSeriesActiveNumber}}</data-grid-item>
      <data-grid-item :span="3" label="申请渠道代码">{{productInfo.productSeriesApplyChannelNo}}</data-grid-item>
      <data-grid-item :span="3" label="产品系列类型">{{productInfo.productSeriesSeriesCategory }}</data-grid-item>
      <data-grid-item :span="3" label="产品系列名称">{{productInfo.productSeriesSeriesName}}</data-grid-item>
      <data-grid-item :span="3" label="商品总价">{{productInfo.productSeriesSeriesTotalAmount}}</data-grid-item>
      <data-grid-item :span="3" label></data-grid-item>
      <data-grid-item :span="3" label></data-grid-item>
    </data-grid>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { DataGrid, DataGridItem } from "@zct1989/vue-component";

import { Dependencies } from "~/core/decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service.ts";
import { Prop } from "vue-property-decorator";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");
@Component({
  components: {
    DataGrid,
    DataGridItem
  }
})
export default class ProductInfo extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @Dependencies(DataImportExcelInfoService)
  private dataImportExcelInfoService: DataImportExcelInfoService;
  private productInfo: any[] = [];

  @CollectionExecutionModule.State private caseId: string;
  @CollectionExecutionModule.State private menuChannel;

  private activated() {
    this.refreshData();
  }

  private refreshData() {
    switch (this.menuChannel) {
      case MENU_CHANNEL.Case_imported:
      case MENU_CHANNEL.Case_await:
        this.dataImportExcelInfoService
          .getImportProduct(this.caseId)
          .subscribe(data => (this.productInfo = data));
        break;

      default:
        // 获取产品信息
        this.caseOperatorPageService
          .queryProduct(this.caseId)
          .subscribe(data => (this.productInfo = data));
        break;
    }
  }
}
</script>

<style lang="less" scoped>
.circle {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 15px;
  margin-right: 5px;
  background-color: #28313e;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  vertical-align: middle;
}

.circle-title {
  font-size: 14px;
  line-height: 13px;
  color: #28313e;
}
</style>
